<script setup>
import { ref } from 'vue'

defineProps({
  msg: String,
})

const count = ref(0)
</script>

<template>
  <main>
      <div class="header">
        <span class="header-left">
          <el-link :underline="false" href="https://lixunchang.github.io/cet4-word-game/#/search" target="_blank">模糊搜索</el-link>
        </span>
        <span class="header-right">
          <span class="steps">{{state.current}} / {{state.list.length}}</span>
          <el-switch
            v-model="state.reviewType"
            class="review-type"
            inline-prompt
            active-text="复习"
            inactive-text="陪练"
            active-value="1"
            inactive-value="0"
          />
          <a class="help" target="_blank" href="https://github.com/lixunchang/cet4-word-game/blob/main/README.md">使用帮助</a>
        </span>
      </div>
      <message v-show="state.msg.text" :text="state.msg.text" :type="state.msg.type"/>
      <div class="playground" :data-word="currentWord">
        <span class="char" v-for="(char,index) in currentWord" :key="currentWord+'-'+index" :class="{
          'audio_char': state.audioIndex < currentWord.length && state.audioIndex > index,
          'equal_char': state.audioIndex!==0 && state.audioIndex % (currentWord.length) === 0,
          'reserve_char': state.audioIndex >= currentWord.length && state.audioIndex % (currentWord.length+1) < index
        }">
          {{char}}
        </span>
        <div class="skill">
          <el-input
            ref="skillInputRef"
            v-model="currentSkill" 
            :placeholder="state.skillFocus?'记录下自己的速记方法，60个字内...':''" 
            maxlength="60" 
            :show-word-limit2="state.skillFocus" 
            @focus="state.skillFocus = true" 
            @blur="state.skillFocus = false" 
            @keyup.enter="handleSkillEnter"
            @change="onSkillChange"
          >
            <!-- <template v-if="state.skillFocus" #prepend>备注：</template> -->
          </el-input>
        </div>
      </div>
      <div class="explain_status">
        <div class="explain" v-if="currentExplain">
          <p v-if="currentExplain.mean_en" style="color:#999;cursor:pointer;" @click="handleClickSentence(currentExplain.mean_en)">
            <label>英文</label>
            <span style="flex:1;" class="ellipsis_word">{{currentExplain.mean_en}}</span>
          </p>
          <p v-if="currentExplain.mean_cn" class="chinese">
            <label>中文</label>
            <span style="flex:1;text-align:left;color:red;font-weight: bold;">
              <span style="flex:1;">{{currentExplain.mean_cn}}</span>
            </span>
          </p>
          <p v-if="currentExplain.word_etyma&&(state.reviewType==='0'||state.reviewSentence)">
            <label>词根</label>
            <span style="flex:1;color:#555;">{{currentExplain.word_etyma}}</span>
          </p>
          <p v-if="currentExplain.sentence&&(state.reviewType==='0'||state.reviewSentence)" @click="handleClickSentence(currentExplain.sentence)" style="cursor: pointer;">
            <label>例句</label>
            <span style="flex:1;color:#666;">{{currentExplain.sentence}}</span>
          </p>
          <p v-if="currentExplain.sentence_trans&&(state.reviewType==='0'||state.reviewSentence)">
            <label>翻译</label>
            <span style="flex:1;text-align:left;color:#b2b2b2;">{{currentExplain.sentence_trans}}</span>
          </p>
        </div>
        <div v-else-if="state.explainStatus" class="explain_result">
          <span v-if="state.explainStatus === 'loading'" style="color:#999;">努力查询中...</span>
          <span style="cursor:pointer;" v-if="state.explainStatus === 'error'" @click="getWordExplain(currentWord)">查询失败，请刷新重试</span>
        </div>
      </div>
      <div class="key-board">
        <div class="letters">
          <div>
            <span @click="handleKeyPress({key:'q', keyCode: 66})">Q</span>
            <span @click="handleKeyPress({key:'w', keyCode: 66})">W</span>
            <span @click="handleKeyPress({key:'e', keyCode: 66})">E</span>
            <span @click="handleKeyPress({key:'r', keyCode: 66})">R</span>
            <span @click="handleKeyPress({key:'t', keyCode: 66})">T</span>
            <span @click="handleKeyPress({key:'y', keyCode: 66})">Y</span>
            <span @click="handleKeyPress({key:'u', keyCode: 66})">U</span>
            <span @click="handleKeyPress({key:'i', keyCode: 66})">I</span>
            <span @click="handleKeyPress({key:'o', keyCode: 66})">O</span>
            <span @click="handleKeyPress({key:'p', keyCode: 66})">P</span>
          </div>
          <div>
            <span @click="handleKeyPress({key:'a', keyCode: 66})">A</span>
            <span @click="handleKeyPress({key:'s', keyCode: 66})">S</span>
            <span @click="handleKeyPress({key:'d', keyCode: 66})">D</span>
            <span @click="handleKeyPress({key:'f', keyCode: 66})">F</span>
            <span @click="handleKeyPress({key:'g', keyCode: 66})">G</span>
            <span @click="handleKeyPress({key:'h', keyCode: 66})">H</span>
            <span @click="handleKeyPress({key:'j', keyCode: 66})">J</span>
            <span @click="handleKeyPress({key:'k', keyCode: 66})">K</span>
            <span @click="handleKeyPress({key:'l', keyCode: 66})">L</span>
          </div>
          <div>
            <span @click="handleKeyPress({key:'z', keyCode: 66})">Z</span>
            <span @click="handleKeyPress({key:'x', keyCode: 66})">X</span>
            <span @click="handleKeyPress({key:'c', keyCode: 66})">C</span>
            <span @click="handleKeyPress({key:'v', keyCode: 66})">V</span>
            <span @click="handleKeyPress({key:'b', keyCode: 66})">B</span>
            <span @click="handleKeyPress({key:'n', keyCode: 66})">N</span>
            <span @click="handleKeyPress({key:'m', keyCode: 66})">M</span>
          </div>
        </div>
        <div class="action">
          <span @click="handleKeyPress({key:'ArrowRight'})">下一个</span>
          <span style="flex:2;" @click="handleKeyPress({key:' '})">空格</span>
          <span @click="handleKeyPress({key:'ArrowLeft'})">上一个</span>
        </div>
      </div>
    </main>
</template>

<style scoped>

</style>
